import { adminAdd, userProfileEdit, userProfileUpdate } from "@/services/userProfile";
import { Form, Input, Modal, message } from "antd";
import React from "react";

// 甲方页面
class UpdateUser extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      visible:false,
      detail:null
    }
  }

  componentDidMount(){
    if(this.props.onRef){
      this.props.onRef(this)
    }
  }

  initData = (detail) => {
    this.setState({
      visible:true,
      detail
    },() => {
      if(detail){
        this.props.form.setFieldsValue({
          name:detail.name,
          username:detail.phone,
          password:detail.password,
          email:detail.email,
          mobilePhone:detail.mobilePhone,
        })
      }
    })
  }

  doCancel = () => {
    this.props.form.resetFields()
    this.setState({
      visible:false,
      detail:null
    })
  }

  okValidate = () => {
    const that = this;
    that.props.form.validateFields((error,values) => {
      if(!error){
        that.doOk(values)
      }
    })
  }

  doOk = async values => {
    const { applicationId,currentNode,pathType } = this.props;
    const { detail } = this.state;
    let res = {}
    values.applicationId = applicationId
    if(detail){
      values.id = detail.id,
      values.status = detail.status
      res = await userProfileEdit(values)
    }else{
      if(pathType === 'enterpriseUserManagement'){
        values.phone =  values.username
        values.categoryId = currentNode.id
        res = await userProfileUpdate(values)
      }else{
        res = await adminAdd(values)
      }
      
    }
    
    if(res.code == 0){
      message.success(res.message)
      this.doCancel()
      this.props.refershList()
    }
  }

  checkField(rule, value, callback) {
    const reg = /^[0-9a-zA-Z_.@-]{1,}$/g;
    if (rule.field === 'username') {
      if (value) {
        if (reg.test(value)) {
          if (value.length > 30 || value.length < 6) {
            callback('支持6-30位大小写字母、数字、下划线、小数点、中划线和@符号');
          } else {
            callback();
          }
        } else {
          callback('支持6-30位大小写字母、数字、下划线、小数点、中划线和@符号');
        }
      } else {
        callback('支持6-30位大小写字母、数字、下划线、小数点、中划线和@符号');
      }
    }
  }

  checkFieldForPassword(rule, value, callback,checkValue) {
    const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/;
    if (rule.field === 'password') {
      if (value) {
        if (reg.test(value)) {
          if (value.length > 30 || value.length < 6) {
            callback('只可填入8-20位数字和字母组合');
          } else {
            callback();
          }
        } else {
          callback('只可填入8-20位数字和字母组合');
        }
      } else {
        callback('只可填入8-20位数字和字母组合');
      }
    }
    console.log(rule,checkValue);
    if (rule.field === 'rePassword') {
      if (value) {
        if(checkValue.password != value){
          callback('确认密码与密码不符');
        }else{
          callback();
        }
      } else {
        callback();
      }
    }
  }

  render(){
    const { visible,detail } = this.state;
    const { form:{getFieldDecorator,getFieldsValue} } = this.props;
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 19 },
    };
    return (
      <Modal
        visible={visible}
        title={detail ? '编辑用户' : '新增用户'}
        onCancel={this.doCancel}
        onOk={this.okValidate}
      >
        <Form {...formItemLayout}>
          <Form.Item label='姓名'>
            {
              getFieldDecorator("name",{rules:[{required:true,message:"请输入姓名"}]})(
                <Input maxLength={15} />
              )
            }
          </Form.Item>
          <Form.Item label='账号'>
            {
              getFieldDecorator("username",{rules:[{required:true,message:"请输入账号"},{ validator: this.checkField },]})(
                <Input maxLength={100} disabled={detail ? true : false} autoComplete="new-user"  />
              )
            }
          </Form.Item>
          {
            detail ? '' : (
              <Form.Item label='密码'>
                {
                  getFieldDecorator("password",{rules:[{required:true,message:"请输入密码"},{ validator: this.checkFieldForPassword }]})(
                    <Input.Password maxLength={100} onPressEnter={this.okValidate} autoComplete="new-password" />
                  )
                }
              </Form.Item>
            )
          }
          {
            detail ? '' : (
              <Form.Item label='确认密码'>
                {
                  getFieldDecorator("rePassword",{rules:[{required:true,message:"请输入密码"},{ validator: (rule, value, callback) => this.checkFieldForPassword(rule, value, callback,getFieldsValue()) }]})(
                    <Input.Password maxLength={100} onPressEnter={this.okValidate} autoComplete="new-password" />
                  )
                }
              </Form.Item>
            )
          }
          <Form.Item label='邮箱'>
            {
              getFieldDecorator("email",{
                rules:[
                  {required:true,
                    pattern:/^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/,
                    message:"请输入正确的邮箱"}
                ]
              })(
                <Input />
              )
            }
          </Form.Item>
          <Form.Item label='手机号'>
            {
              getFieldDecorator("mobilePhone",{
                rules:[
                  {required:false,
                    pattern:/^1[3-9]\d{9}$/,
                    message:"请输入正确的手机号"},
                ]
              })(
                  <Input />
              )
            }
          </Form.Item>
        </Form>
      </Modal>
    )
  }
}

export default Form.create()(UpdateUser)